<template>
  <div class="check-modal">
    <CustomDialog :options="options" @beforeClose="handleClose" @confirm="handleConfirm">
      <div class="wrapper">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="审核结果" prop="isPass">
            <el-radio-group v-model.number="ruleForm.isPass">
              <el-radio :label="1"> 通过 </el-radio>
              <el-radio :label="0"> 不通过 </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核意见" class="margin-top-xs" prop="reason">
            <el-input
              v-model="ruleForm.reason"
              :autosize="{ minRows: 6 }"
              type="textarea"
              show-word-limit
              maxlength="200"
              placeholder="请输入意见或驳回原因"
            />
          </el-form-item>
        </el-form>
      </div>
    </CustomDialog>
  </div>
</template>

<script>
  import CustomDialog from '@/components/CustomDialog';
  import { approveTask, rejectTask } from '@/api/task/index.js';
  export default {
    name: 'CheckModal',
    components: { CustomDialog },
    props: {
      options: {
        type: Object,
        required: true,
        default() {
          return {
            width: 648,
            title: '审核',
            modal: false,
            visible: false,
            top: '30vh',
            cancelText: '取消',
            confirmText: '确定',
            defaultValue: {},
          };
        },
      },
    },
    emits: ['close', 'confirm'],
    watch: {
      'options.visible'(val) {
        if (val) {
          this.resetForm();
        }
      },
    },
    data() {
      return {
        rules: {
          isPass: [{ required: true, message: '请选择是否通过', trigger: 'change' }],
          reason: [{ required: false, message: '请输入审核意见', trigger: 'blur' }],
        },
        ruleForm: {},
      };
    },
    mounted() {},

    methods: {
      handleClose() {
        this.$emit('close');
      },
      handleConfirm() {
        this.$refs.ruleFormRef.validate(async (valid) => {
          if (valid) {
            if (!this.options.defaultValue.taskId) {
              this.$message.error('任务id不能为空');
              return;
            }
            let params = this.ruleForm;
            const data = {
              ids: [this.options.defaultValue.taskId],
              reason: params['reason'],
              data: {
                report: this.options.defaultValue.isWantFinishAudit,
              },
            };
            let apiName = params['isPass'] ? approveTask : rejectTask;
            await apiName(data);
            this.$message.success('处理成功');
            this.$emit('confirm', this.ruleForm);
          } else {
            return false;
          }
        });
      },
      resetForm() {
        this.$nextTick(() => {
          this.$refs.ruleFormRef.resetFields();
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .wrapper {
    background: #fff;
    width: 100%;
    padding: 20px 20px 0;
  }
  .reason-title {
    color: rgba(0, 0, 0, 0.65);
    margin-top: 15px;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
  }
</style>
